<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="/image/favicon.ico" type="image/x-icon">
<style type="text/css">
/*@import "css/per_3.css";*/
* {
	margin: 0px;
	padding: 0px;
}

#div1 {
	min-width: 954px;
	height: 100%;
}

#div2 {
	min-width: 954px;
	line-height: 60px;
	text-indent: 20px;
	vertical-align: middle;
	background-color: gainsboro;
	border: 1px solid gainsboro;
}

#div2 h2 {
	color: gray;
}

#div3 {
	min-width: 954px;
	height: 100%;
}

.ul {
	min-width: 400px;
	height: 28px;
	padding-top: 10px;
	text-indent: 50px;
	font-size: 20px;
	font-weight: bold;
}

ul {
	list-style: none;
}

#div3 ul li {
	float: left;
	padding-top: 10px;
}

a {
	text-decoration: none;
}

span {
	color: gray;
	font-size: 18px;
}

#div4 {
	min-width: 550px;
	height: 320px;
	margin-top: 28px;
}

#div5 {
	min-width: 550px;
	height: 270px;
}

.p0 {
	font-size: 13px;
	color: grey;
	text-indent: 60px;
	padding-top: 20px;
}

#div6 {
	min-width: 550px;
	margin-top: 40px;
}

#wholeImg {
	width: 120px;
	height: 120px;
	margin-top: 20px;
	margin-left: 60px;
	text-align: center;
	vertical-align: middle;
}

.filebtn {
	width: 130px;
	height: 40px;
	font-size: 16px;
	margin-left: 60px;
	color: grey;
}

span {
	color: grey;
}
/*.pass-portrait-save {*/
/*padding-top: 40px;*/
/*position: relative;*/
/*}*/
.filebt {
	width: 100px;
	height: 40px;
	font-size: 16px;
	margin-left: 60px;
	color: grey;
}
</style>
</head>
<body>
	<div id="div1">
		<div id="div2">
			<h2>修改头像</h2>
		</div>
		<div id="div3">
			<ul class="ul">
				<li><span>自定义头像</span></li>
			</ul>
			<div id="div4">
				<form id="forms">
					<div id="div5">
						<p class="p0">选择本地照片,上传编辑自己的头像</p>
						<div id="div6">
							<input class="filebtn" type="button" name="button"
							value="选择图片" onclick="javascript:openBrowse();"/> 
							<input style="display: none" type="file" name="file" id="file">
							<span>支持jpg、jpeg、gif、png、bmp格式的图片</span>
						</div>
						<!-- 图片预览 -->
						<div id="wholeImg"></div>
					</div>
					<!-- <input id="sub" type="button"value="保存头像" class="filebt"> -->
					<button type="button" id="tijiao" class="filebt">保存</button>
				</form>
			</div>
			<!--<iframe name="main">-->

			<!--</iframe>-->
		</div>
	</div>
</body>
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript">
	function openBrowse() {//点击按钮调用file属性
		var ie = navigator.appName == "Microsoft Internet Explorer" ? true
				: false;
		if (ie) {
			document.getElementById("file").click();
			document.getElementById("filename").value = document
					.getElementById("file").value;
		} else {
			var a = document.createEvent("MouseEvents");//FF的处理
			a.initEvent("click", true, true);
			document.getElementById("file").dispatchEvent(a);
		}
	}
	$('#file').change(function() {
		previewImg($(this)[0]);
	});

	function previewImg(file) {//
		//判断是否支持FileReader
		if (window.FileReader) {
			var reader = new FileReader();
			// readAsBinaryString()
		} else {
			alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
		}
		//图片预览
		var preDiv = document.getElementById("wholeImg");
		//获取图片
		if (file.files && file.files[0]) {
			var reader = new FileReader();
			reader.onload = function(e) {
				var img = document.createElement("img");
				img.style = "width:80px";
				img.setAttribute("src", e.target.result);
				preDiv.appendChild(img);
			}
			reader.readAsDataURL(file.files[0]);
		}
	}

	$(function() {//窗口加载完毕
		$('#tijiao').click(function() {
			var userphoto = $('#file').val();
			var formData=new FormData($("#forms")[0]);//表单对象
			$.ajax({
				url : '/pan/updatePhoto',
//				url:'http://httpbin.org/post',
				type : 'POST',
				data :formData,
				processData: false,// 告诉jQuery不要去处理发送的数据(必须设置)
				contentType: false, // 告诉jQuery不要去设置Content-Type请求头（必须设置）
				success : function(data) {
					if (data.statusCode == 200) {
						setCookie("userPhoto",data.data);  //更新cookie
						alert("修改成功");
//						window.location.reload();//刷新当前页面
						parent.location.reload();//同步刷新页面
					}
				},
				error : function(err) {
					console.log(err);
				}
			});
		})
	});
</script>
</html>